<template>
  <div class="person_info">
    <el-row>
      <el-col :span="12" offset="1">
        <el-form ref="form" :model="personInfoForm" label-width="80px">
          <span>昵称：</span>
          <el-input v-model="personInfoForm.login_name"
                    style="width: 200px"
                    placeholder="请输入账号"></el-input>
          <br>
          <span>密码：</span>
          <el-input v-model="personInfoForm.password"
                    type="password"
                    style="width: 200px;margin-top: 20px"
                    placeholder="请输入密码"></el-input>
          <br>
          <span>手机：</span>
          <el-input v-model="personInfoForm.phone"
                    type="text"
                    style="width: 200px;margin-top: 20px"
                    placeholder="请输入密码"></el-input>
          <br><br>注册时间：xxxx-xx-xx

          <el-divider></el-divider>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="身体状况">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="高血压" name="type"></el-checkbox>
                <el-checkbox label="高血脂" name="type"></el-checkbox>
                <el-checkbox label="糖尿病" name="type"></el-checkbox>
                <el-checkbox label="心脏病" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="其余状况">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-form>
      </el-col>
      <el-col :span="6" offset="4">
        <el-avatar :size="200" src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-avatar>
        <div><el-button style="margin-left: 35px;margin-top: 20px" type="primary" @click="onSubmit">点击更换头像</el-button></div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  name: "personInfo",
  data() {
    return {
      personInfoForm: {
        login_name: '',
        password: '',
        phone: '',
        type: [],
      },
      form: {
        type: [],
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>

<style scoped>
.person_info {
  padding-top: 60px;
  height: 450px;
  width: 80%;
  background-color: #d3dee7;
  margin: 0 auto;
}
</style>